來找設計師一起 side project，前後端 / UIUX 皆可喔~
配對單連結：
https://docs.google.com/spreadsheets/d/1-6YCUfqaB7dQLQa34pbuCHgYvXU3eYZ0dvDcPszhE4g/edit?usp=sharing

印度氣象局官網：https://mausam.imd.gov.in/#.

prototype 大家自己玩玩看，應該會每天更新ㄅ
(好ㄉ今天昨天都沒有原諒我嗚嗚)：https://xd.adobe.com/view/bd7fd57a-8e2f-44b0-bc26-322e98708133-e82c/

HI 大家，今天還是嚴重睡眠不足，為了活命先貼個以前剛學 XD 時寫的 wireframe 心得～

主要分享的主題是：wireframe 線稿的製作和技巧分享，也包含我一開始所踩過的雷，底下均是個人經驗分享。

我一開始從網頁設計師轉職為 UIUX 時，有自修了一些線上課，在這些介面設計學習歷程中，我覺得一開始遇到最大的問題和學習點是「繪製線稿 (wireframe)」，而我猜這大概是所有初階的UIUX 設計師學習過程中陣痛期頗久的技能（但這個技能熟悉之後就駕輕就熟了）。

尤其是將自己不甚完美的 dirty prototype 轉為實質軟體介面，再轉為 mockup 時畫面上的巨大落差和不適應感，可能有點類似於將設計稿轉為前端畫面（笑）。

OK，好不容易結束需求確認和資訊結構的部分，先別急著開始製作 wireframe，首先要注意一些前置作業，因為它會影響到你的 wireframe 和之後的工作流程。以下是我在做頭幾個 wireframe 所遇到的一些挫折和反省，希望可以幫助到所有剛剛進入 UI 領域的朋友。

第一、不要使用任何顏色在你的線稿中

第一個，不要使用任何顏色在你的線稿中（除了線稿本身的顏色）

我在一開始的線稿中的確有犯這個錯誤，一開始的線稿總是會急於上色，比如之前在製作四個氣象軟體的線稿，等不及全做完就先進行配色，事後重工了不少。上色後的成品的確是比較好看，但事實上當色彩繽紛後就是各種災難的開始。

最主要的原因是，顏色會模糊了各階層的清晰度。

我閱讀到 ux movement 裡的一篇文章 How to Communicate Visual Hierarchy on Wireframes （https://uxmovement.com/wireframes/how-to-communicate-visual-hierarchy-on-wireframes/）

裡面有說明當其他元素都是黑白時，很容易感受到線框稿上彩色元素的重量（weight）。

但是將線框稿轉換成 mockup 時，你是無法知道該元素是否有一樣的清晰度和重量的，這是因為精稿中也會有很多不同的顏色，線稿中的任何有色元素的清晰度就會散失掉，所以當其他頁面元素也上色後，他原本的視覺重量就會減輕。所以千萬不要使用顏色來彌補你設計的不足，就算沒有顏色，線稿還是應該要看得出非常清晰的層次。

ps. 但是相同明度不同色相的顏色，將他們飽和度降低後其實是有點不同的，比如說黃色和藍色，之後爬完文獻後可以

第二、過多或過少的色票

第二個，我想要分享的 wireframe 失誤是「過多或過少的色票」，這真的造成很多製作精稿上的麻煩。

一開始在製作線稿的時候，我設計了非常多層的顏色，因為我總覺得每個不同的功能、相異的屬性就是要給他們一點「特殊的凸顯」，所以我設定了大概有九個不同的黑、深灰、和淺灰色在色票中，這導致我在後期配色的時候非常的困惑，而且還會發生「明明是同樣階層的元素，但被我用了不同色」，原因只是兩個色票看起來太相近（且太不必要）。

如果你參考 Adobe 的 UI Kit ，你就會發現他其實也只使用了五種顏色。再者，如果你去看 Adobe 系列超級完美的軟體介面設計，如 Photoshop ，你會發現在這極其複雜的介面中，他也大概用了 6 種灰黑色，頂多加上一兩個 highlight 用的亮藍提示色。事實上，我覺得這個就是軟體介面設計的精髓和目標！

況且，使用者根本不會那麼在意這些按鈕到底階層如何，他們只想快速的找到他們要找的東西。如果你放太多不同深淺的階層，其實會導致更多的疑惑。

比如說「設定圖表排序」、「圖表繪圖類型」、「圖表輸出格式」，這三種的階層性還真的因各種使用者而異，想要製作透明背景的人會自動聚焦在「圖表輸出格式」、而想要知道最大降雨值的人只會掃描「設定圖表排序」這個選項。

所以差異不太多的話就省掉這點力氣吧～

總之，看了一些設計不錯的軟體後，我覺得最好的 wireframe 顏色數量可能盡量控制在 4-7 個，過多會混亂，過少會無法展示出階層性 – 一個最深色、一個是最淺色、中間三個是過渡色。

次深色有時會被拿來當作副標題，或是各種提示文字與框線，而次淺通常被拿來當作淺灰底色（灰色在上色的時候可以加一點點色調，比如臉書的背景色，是很漂亮的帶藍調灰色）

第三、謹慎的規劃線稿與精稿的顏色共用

當 wireframe 許多元素共用同一顏色時，轉成 mockup 的時候就會是一場小小災難。尤其是當頁面的顏色比較多的時候，有做過複雜UI的網頁設計應該很清楚 ^^

當初在做我們氣象團隊的官網時，我沒有注意到有一些 border 是共用到對話色塊和文字顏色，所以當我要把邊界換成紅色的時候，所有字體和對話方塊的顏色也一起變紅了，最後還是比較大規模的手動把它調整回去，真的搞得我滿崩潰的哈哈。

說實話，我到現在還蠻常吃這個虧，好像也沒有一個比較好的解法，製作 wireframe 時顏色分佈考慮總是不夠充足。雖然沒什麼十全十美的方法可以解決他，但我還是有兩個小小的設計細節微調：

1. 事先完善區分「文字、邊界跟背景」的顏色
   對，僅僅文字、邊界跟背景！
   可能是因為這三者幾乎佔了頁面中 80% 的位置，我發現只要做到這一點，會省掉百分之 80 之後的調整困難，非常值得一試。

2. 第二、相同配色中，再增加一個顏色相近的色票。這個算是我最近正在嘗試的方式，比如說 #080808 & #070707，兩者都是深黑，我會在筆記本上做個記號去區分色票到底套用到哪一個地方，雖然投入的時間成本會增加，但如果遇到比較大型的軟體介面還真的會輕鬆很多
   （尤其是同時要製作 bright / dark mode ，色票共用率真的滿驚人的也很難調整，這時也許就會派上用場）。

第四、找尋一個令你全身舒暢的線稿色系

我原本以為線稿色系無關輕重，但後來發現滿重要的（跟工程師的程式寫作習慣一樣）。

一開始在畫線稿的時候，我有下載 Adobe XD 的 UI Kit 來做參考，而 XD 預設是這種偏明亮的淡藍色，包含所有的線段與底色皆採用一樣的色相，但不同色階和飽和度（講簡單點就是在底下這條線上移動）。

雖然 Adobe XD 是各種不同的濃度的淡藍色，但我製作了幾個線稿之後，還是轉移為使用灰黑色系為主。

1. 我做的氣象軟體介面主色調用到了蠻多藍色系，很容易與 wireframe 的藍色做混淆，從 wireframe  轉為配色的 mockup 過程就會有一點問題，所以後來就傾向用完全沒有飽和度問題的黑色系，也意外發現這樣的線稿呈現方式，反而會更貼近完整精稿一點。

2. 使用灰黑色系的最大優點是「看久了比較不會眼睛疲勞」。我覺得Adobe XD Kit 預設的的藍色其實相當的明亮，我又是一個重度近視加散光，有時候將畫面放到200%在雕刻 icon 或是細節時，大面積的藍色和亮白真的還蠻痛苦的，轉成深黑色系的確改善很多，一樣是近視眼或重度散光的設計師朋友可以試試看。

（但這方面就因人而異，你也可以試試看芭比粉，也許靈感源源不絕XD）

最後一個重要提醒，大方向先、細節後

最後，一定要先確定線稿後，再進行配色和後續調整等細節，如果是一系列的軟體產品，也盡量在所有 wireframe 結束後再統一製作 mockup。

我覺得在做 wireframe 的時候，一定要很清楚的知道你畫面中各個元素安排的位置，也就是說，不要跳過 dirty prototype 的階段，因為這樣之後再調整真的...很累。

比起單一顏色的 wireframe，你在調整「上色元素」的視覺階層時，那就會需要考慮更多因素，這時你心中可能會被各種變因干擾，充滿大量的問題：

「這個紅色也太飽和，他放在這個地方對嗎？還是左邊一點？大一點呢？還是給他陰影？」

「這個 icon 藍底白字能不能夠吸引使用者點擊？還是要白底藍字？需要邊界嗎？icon要小一點嗎？」

「測站選擇前面加個橘色表頭好嗎？還是藍色？這麼粗好看嗎？還是...要加方形？」

等等諸如此類的問題，充斥著各種排列組合。
但當 wireframe 已經確認過後再進行配色，這些張牙舞爪的問題就會 downgrade 成為：

「這個紅色也太飽和，要不要...調淡一點？」

「這個 icon 藍底白字能不能夠吸引使用者點擊？還是要...綠底？」

「測站選擇前面加個橘色表頭好嗎？還是...紅色？」

因為人的大腦並沒有辦法一次處理太多事情，所以我覺得這些經驗總結一個蠻大的啟示 – 請將所有的顏色放到最後一步再調整，這時一切都變得合理簡單，邏輯也順暢多了。

你可以在紙上實踐 dirty prototype ，我真的酷愛a4紙，我覺得比起在畫面上移動各種元素，真的是一個很好的製作原型的工具，在紙上塗塗畫畫反而更有創造力，而且因為紙可以折疊，所以可以輕易模擬點擊的狀況，這真的會幫你省了很多時間（至少我覺得 UI 軟體在做效果還是會花上不少時間）。
我會使用紙質的 prototype 給氣象局公務員操作氣象查詢介面，不僅可以直接看到回饋，也增加了一點兒人情的樂趣 XD

紙質的 prototype 分享

ipad prototype 分享

希望今天的分享對初學 wireframe 的人有點幫助，如果有更多建議也可以留言告訴我喔~~~